<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Loading - Standalone</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/core.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
  <script type="module">
    import { loadingController } from '../../../../dist/ionic/index.esm.js';
    window.loadingController = loadingController;
  </script>
<body>
  <button id="basic-loading" onclick="openLoading({ message: 'Hellooo', duration: 5000 })">Show Loading</button>
  <button id="long-content-loading" onclick="openLoading({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</button>
  <button id="no-spinner-loading" onclick="openLoading({duration: 2000, content: 'Loading Please Wait...', spinner: null})">Show Loading with no spinner</button>
  <button id="translucent-loading" onclick="openLoading({duration: 5000, content: 'Loading Please Wait...', translucent: true})">Show Loading with translucent</button>
  <button id="custom-class-loading" onclick="openLoading({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</button>

  <style>
    body > button {
      display: block;
      clear: both;
      width: 100%;
      padding: 12px 8px;
      font-size: 1em;
      background: #f8f8f8;
      border: 1px solid #eee;
      border-radius: 4px;
      margin-bottom: 8px;
    }
  </style>

  <script>
    async function openLoading(opts) {
      const loading = await loadingController.create(opts);
      await loading.present();
    }
  </script>
</body>
</html>
